{% extends 'base.html' %}
{% block title %}日报表{% endblock %}
{% block content %}
    <div class="page-header">
        <h1>不良品日数据
            <small>NG Day Report</small>
        </h1>
    </div>

    <table class="table table-striped">
        <thead>
        <tr>
            <th>铸造不良</th>
            <th>加工不良</th>
            <th>涂装不良</th>
            <th>小计</th>
            <th>投料时间</th>
        </thead>
        </tr>
        <tbody>
        {% for d in data %}
            <tr>
                <td>{{ d.n_casting }}</td>
                <td>{{ d.n_machining }}</td>
                <td>{{ d.n_coating }}</td>
                <td>{{ d.n_sum }}</td>
                <td>{{ d.put_at|time:"H:i" }}</td>

            </tr>
        {% endfor %}
        </tbody>
    </table>
    <div class="row">
        <div id="chart" style="width: 100%;height:400px;"></div>
    </div>
{% endblock %}
{% block script %}
    <script src="/static/echart/echarts.js"></script>
    <script>
        $(document).ready(function () {
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('chart'));

            // 指定图表的配置项和数据
            let option = {
                title: {
                    text: '日投料曲线'
                },
                tooltip: {},
                legend: {
                    data: ['铸造', '加工', '涂装']
                },
                xAxis: {
                    type: 'time',
                },
                yAxis: {},
                series: [
                    {
                        name: '铸造',
                        type: 'line',
                        data: {% autoescape off %}{{ casting }} {% endautoescape %}

                    },
                    {
                        name: '加工',
                        type: 'line',
                        data: {% autoescape off %}{{ machining }} {% endautoescape %}

                    },
                    {
                        name: '涂装',
                        type: 'line',
                        data: {% autoescape off %}{{ coating }} {% endautoescape %}

                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        });

    </script>
{% endblock %}
